<!--
 @author: zhangxt
 @date: 2024/4/13
 @description: 图片编辑器组件 官网：https://nhn.github.io/tui.image-editor/latest/ImageEditor
-->
<template>
  <div class="image-editor-container">
    <div :id="editorId"></div>
    <div class="buttons">
      <button class="upload-btn" @click="saveAndUpload">上传</button>
      <button class="download-btn" @click="download">下载</button>
    </div>
  </div>
</template>

<script>
import 'tui-image-editor/dist/tui-image-editor.css'
import 'tui-color-picker/dist/tui-color-picker.css'
import ImageEditor from 'tui-image-editor'

const customTheme = {
  // common
  'common.bi.image': '', // 左上角logo图片
  'common.bisize.width': '0px',
  'common.bisize.height': '0px',
  'common.backgroundImage': 'none',
  'common.backgroundColor': '#f3f4f6',
  'common.border': '1px solid #333',

  // header
  'header.backgroundImage': 'none',
  'header.backgroundColor': '#151515',
  'header.border': '0px',

  // load button
  'loadButton.backgroundColor': '#fff',
  'loadButton.border': '1px solid #ddd',
  'loadButton.color': '#222',
  'loadButton.fontFamily': 'NotoSans, sans-serif',
  'loadButton.fontSize': '12px',
  // 'loadButton.display': 'none', // 隐藏

  // download button
  'downloadButton.backgroundColor': '#fdba3b',
  'downloadButton.border': '1px solid #fdba3b',
  'downloadButton.color': '#fff',
  'downloadButton.fontFamily': 'NotoSans, sans-serif',
  'downloadButton.fontSize': '12px',
  // 'downloadButton.display': 'none', // 隐藏

  // icons default
  'menu.normalIcon.color': '#8a8a8a',
  'menu.activeIcon.color': '#555555',
  'menu.disabledIcon.color': '#ccc',
  'menu.hoverIcon.color': '#e9e9e9',
  'submenu.normalIcon.color': '#8a8a8a',
  'submenu.activeIcon.color': '#e9e9e9',

  'menu.iconSize.width': '24px',
  'menu.iconSize.height': '24px',
  'submenu.iconSize.width': '32px',
  'submenu.iconSize.height': '32px',

  // submenu primary color
  'submenu.backgroundColor': '#1e1e1e',
  'submenu.partition.color': '#858585',

  // submenu labels
  'submenu.normalLabel.color': '#858585',
  'submenu.normalLabel.fontWeight': 'lighter',
  'submenu.activeLabel.color': '#fff',
  'submenu.activeLabel.fontWeight': 'lighter',

  // checkbox style
  'checkbox.border': '1px solid #ccc',
  'checkbox.backgroundColor': '#fff',

  // range style
  'range.pointer.color': '#fff',
  'range.bar.color': '#666',
  'range.subbar.color': '#d1d1d1',

  'range.disabledPointer.color': '#414141',
  'range.disabledBar.color': '#282828',
  'range.disabledSubbar.color': '#414141',

  'range.value.color': '#fff',
  'range.value.fontWeight': 'lighter',
  'range.value.fontSize': '11px',
  'range.value.border': '1px solid #353535',
  'range.value.backgroundColor': '#151515',
  'range.title.color': '#fff',
  'range.title.fontWeight': 'lighter',

  // colorpicker style
  'colorpicker.button.border': '1px solid #1e1e1e',
  'colorpicker.title.color': '#fff'
}
const customMenu = [
  'resize',
  'crop',
  // 'flip',
  'rotate',
  'draw',
  'shape',
  // 'icon',
  'text'
  // 'mask',
  // 'filter'
]
const locale_zh = {
  // 操作栏
  ZoomIn: '放大',
  ZoomOut: '缩小',
  Hand: '移动',
  History: '历史',
  Undo: '撤销',
  Redo: '反撤销',
  Reset: '重置',
  Delete: '删除',
  DeleteAll: '全部删除',

  // 工具栏
  Resize: '尺寸',
  Crop: '裁剪',
  Flip: '镜像',
  Rotate: '旋转',
  Draw: '线条',
  Shape: '多边形',
  Icon: '图标',
  Text: '文字',
  Mask: '遮罩',
  Filter: '滤镜',

  // 尺寸
  Width: '宽度',
  Height: '高度',
  'Lock Aspect Ratio': '锁定宽高比例',
  Apply: '应用',
  Cancel: '取消',

  // 裁剪
  Custom: '自定义',
  Square: '正方形',

  // 镜像
  'Flip X': 'X 轴',
  'Flip Y': 'Y 轴',

  // 旋转
  Range: '区间',

  // 线条
  Free: '曲线',
  Straight: '直线',
  Color: '颜色',

  // 多边形
  Rectangle: '矩形',
  Circle: '圆',
  Triangle: '三角',
  Fill: '填充',
  Stroke: '描边',

  // 图标
  Arrow: '箭头',
  'Arrow-2': '箭头2',
  'Arrow-3': '箭头3',
  'Star-1': '星星1',
  'Star-2': '星星2',
  Polygon: '多边形',
  Location: '定位',
  Heart: '心形',
  Bubble: '气泡',
  'Custom icon': '自定义图标',

  // 文字
  Bold: '加粗',
  Italic: '斜体',
  Underline: '下划线',
  Left: '左对齐',
  Center: '居中',
  Right: '右对齐',
  'Text size': '字体大小',

  // 滤镜
  'Load Mask Image': '加载蒙层图片',
  Grayscale: '灰度',
  Blur: '模糊',
  Sharpen: '锐化',
  Emboss: '浮雕',
  'Remove White': '除去白色',
  Distance: '距离',
  Brightness: '亮度',
  Noise: '噪音',
  'Color Filter': '彩色滤镜',
  Sepia: '棕色',
  Sepia2: '棕色2',
  Invert: '负片',
  Pixelate: '像素化',
  Threshold: '阈值',
  Tint: '色调',
  Multiply: '正片叠底',
  Blend: '混合色',

  // 按钮
  Load: '选择',
  Download: '查看'
}

export default {
  name: 'ImageEditor',
  props: {
    editorId: {
      type: String,
      default: 'imageEditor'
    }
  },
  data() {
    return {
      instance: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const options = {
        includeUI: {
          initMenu: 'draw', // 默认打开的菜单项
          menuBarPosition: 'bottom', // 菜单所在的位置
          menu: customMenu, // 自定义菜单
          theme: customTheme, // 自定义样式
          locale: locale_zh // 本地化语言为中文
        },
        cssMaxWidth: 600, // canvas 最大宽度
        cssMaxHeight: 400 // canvas 最大高度
      }
      this.instance = new ImageEditor(document.querySelector(`#${this.editorId}`), options)
      document.getElementsByClassName('tui-image-editor-main')[0].style.top = '45px' // 图片距顶部工具栏的距离
      document.getElementsByClassName('tie-btn-zoomOut')[0].style.display = 'none'
      document.getElementsByClassName('tie-btn-zoomIn')[0].style.display = 'none'
      document.getElementsByClassName('tie-btn-hand')[0].style.display = 'none'
      document.getElementsByClassName('tie-btn-history')[0].style.display = 'none'
      document.getElementsByClassName('tui-image-editor-icpartition')[0].style.display = 'none'
    },
    // 下载
    async download() {
      const blob = await this.dataURLtoBlob() // 获取Blob对象
      // 自定义下载逻辑
      const downloadLink = document.createElement('a')
      downloadLink.href = URL.createObjectURL(blob)
      downloadLink.download = 'editedImage.png'
      document.body.appendChild(downloadLink)
      downloadLink.click()
      document.body.removeChild(downloadLink)
    },
    //  保存并上传
    async saveAndUpload() {
      const blob = await this.dataURLtoBlob() // 获取Blob对象
      // 设置文件名
      const fileName = 'desiredFileName.png'
      blob.name = fileName
      // 使用FormData上传Blob
      const formData = new FormData()
      formData.append('image', blob, fileName)
      // 使用fetch API上传
      // fetch('你的上传URL', {
      //   method: 'POST',
      //   body: formData
      // })
      //   .then(response => response.json()) // 根据服务器响应格式处理
      //   .then(data => {
      //     console.log(data)
      //     // 处理服务器响应数据
      //   })
      //   .catch(error => {
      //     console.error('上传出错:', error)
      //   })
    },
    // 将Base64转换为Blob对象
    dataURLtoBlob(dataurl) {
      if (!dataurl) {
        dataurl = this.instance.toDataURL() // 获取编辑后的图片Base64编码
      }
      const arr = dataurl.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    }
  }
}
</script>

<style scoped lang="scss">
.image-editor-container {
  width: 100%;
  height: 680px;
  position: relative;
  .buttons {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    button {
      width: 118px;
      height: 38px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 20px;
      font-size: 12px;
      background: #fff;
      color: #222;
      font-family: NotoSans, sans-serif;
      font-weight: bold;
      border: 1px solid #ddd;
      cursor: pointer;

      &.download-btn {
        background: #fdba3b;
        border-color: #fdba3b;
        color: #fff;
        margin-left: 8px;
      }
    }
  }
}
</style>
